<template>
	<div class="page">
		<myNavbar title="空桶押金"></myNavbar>
		<div class="deposit">
			<div class="total-deposit">
				<div style="height:50px;width:750px">
					<image class="vein" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
				</div>
				<div class="total-deposit-head">
					<text style="margin-left:15px;font-size: 30px;">空桶押金</text>
					<text style="margin-right:15px;font-size: 30px;font-weight: 700;">¥{{price}}</text>
				</div>
				<div class="total-deposit-bottom">
						<div>
							<text style="margin-left:15px;color:rgba(0,0,0,0.5);font-size: 30px;">压桶数:{{stock}}</text>
						</div>
						<div>
							<text style="margin-left:15px;color:rgba(0,0,0,0.5);font-size: 30px;">欠桶数:{{emptyBarrelLess}}</text>
						</div>
						<div>
							<text style="margin-left:15px;color:rgba(0,0,0,0.5);font-size: 30px;">存桶数:{{emptyBarrelMany}}</text>
						</div>
				</div>
			</div>
			<div class="detailed-content">
				<div class="detailed-title-content">
					<text :class="[isActive===1? 'active': 'title']" @click="tabsClick(1)">押金记录</text>
					<text :class="[isActive===2? 'active': 'title']" @click="tabsClick(2)">空桶记录</text>
				</div>
				<div :class="[isActive===1?'tabs-line1':'tabs-line2']"></div>
			</div>
		</div>
		<depositList v-if="isActive===1" :id="id"></depositList>
		<emptyBarrelList v-else :id="id"></emptyBarrelList>
	</div>
</template>
<script>
	import myNavbar from "../../../../components/myNavbar/myNavbar.vue";
	import depositList from './components/depositList.vue'
	import emptyBarrelList from './components/emptyBarrelList.vue'
	import { summary } from '../../../../api/emptyBarrel.js'
	export default {
		name: '',
		data() {
			return {
				id: '',
				stock: 0,
				price: 0,
				emptyBarrelMany:0,
				emptyBarrelLess:0,
				emptyBarrel: 0,
				isActive: 1
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.id = app.config.params
			this.initSummary()
		},
		mounted() {
		},
		methods: {
			initSummary() {
				console.log(this.id, 'this.id')
				summary({ memberId: this.id }).then(res => {
					console.log(res, 'res...')
                    this.emptyBarrel= !this.isNull(res.data.emptyBarrel)?Number(res.data.emptyBarrel):'0'
                    this.price= !this.isNull(res.data.price)?Number(res.data.price).toFixed(2):'0'
                    this.stock= !this.isNull(res.data.stock)?Number(res.data.stock):'0'
					this.emptyBarrelMany=!this.isNull(res.data.emptyBarrelMany)?Number(res.data.emptyBarrelMany).toFixed(0):'0'
					this.emptyBarrelLess=!this.isNull(res.data.emptyBarrelLess)?Number(res.data.emptyBarrelLess).toFixed(0):'0'
				}).catch(err => {
					console.log(err)
				})
			},
			tabsClick(index) {
				this.isActive = index
			}
		},
		components: {
			myNavbar,
			depositList,
			emptyBarrelList
		},
	}
</script>

<style scoped>
	.page {
		background-color: rgb(248, 248, 248);
		flex: 1;
	}

	.vein {
		position: absolute;
		z-index: 100;
		height: 500px;
		width: 750px;
	}

	.deposit {
		width: 750px;

		background-image: linear-gradient(to bottom, #c2c2c2, #f8f8f8);

	}

	.total-deposit {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.total-deposit-head {
		width: 695px;
        padding-top: 30px;
        padding-bottom: 30px;
		background-image: linear-gradient(to right, #f7dec5, #f0d0a7);
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.total-deposit-bottom {
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 750px;
		padding-left: 30px;
		padding-right: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
        justify-content: space-between;
        box-sizing: border-box;
	}

	.aaaa {
		z-index: 100;
		height: 100px;
		background: linear-gradient(to right, #f7dec5, #f0d0a7);
		/* background:red; */
		width: 690px;
		margin-left: 10px;
		-webkit-clip-path: ellipse(50% 37% at 50% 0%);
		clip-path: ellipse(50% 37% at 50% 0%);
	}

	.total-deposit-money {
		width: 695px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
        align-items: center;
	}

	.botton-deposit {
		padding-top: 20px;
		height: 260px;
		margin-top: 30px;
		background-color: white;
		padding-left: 20px;
	}

	.botton-deposit-title-content {
		height: 40px;
		width: 140px;
		display: flex;
		justify-content: space-between;
	}

	.vertical {
		margin-top: 10px;
		height: 30px;
		width: 10px;
		background-image: linear-gradient(to bottom, #FFFFF0, #FFD39B);
	}

	.botton-deposit-title {
		font-size: 30px;
	}

	.botton-deposit-botton-content {
		display: flex;
		justify-content: space-around;
	}

	.title-button {
		margin-top: 10px;
		font-size: 28px;
		margin-right: 35px;
	}

	.button-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 250px;
		width: 200px;

	}

	.button {
		font-size: 24px;
		font-weight: 400;
		color: white;
		width: 136px;
		height: 48px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		background-image: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
	}

	.button_click {
		font-weight: 400;
		width: 136px;
		height: 48px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		border: 1px solid;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(126, 128, 136, 0.8);
	}

	.title {
		margin: 30px 0 20px 0;
		font-size: 28px;
		width: 150px;
		text-align: center;
		height: 40px;
		color:rgba(0,0,0,0.5);
	}

	.detailed-content {
		flex: 1;
		margin-top: 20px;
		background-color: white;
	}

	.detailed-title-content {
		width: 750px;
		flex-direction: row;
		justify-content: space-around;
		display: flex;
		position: relative;
	}
	.tabs-line1 {
		position: absolute;
		bottom: 0;
		left: 0;
		/* (750 / 2 - 文字宽度) / 2*/
		transform: translateX(112.5px);
		width: 150px;
		height: 2px;
		border-bottom-style: solid;
		border-bottom-width: 5px;
		border-bottom-color: #d7261c;
	}
	.tabs-line2 {
		position: absolute;
		bottom: 0;
		right: 0;
		transform: translateX(-112.5px);
		width: 150px;
		height: 2px;
		border-bottom-style: solid;
		border-bottom-width: 5px;
		border-bottom-color: #d7261c;
	}
	.active {
		margin: 30px 0 20px 0;
		font-size: 28px;
		width: 150px;
		text-align: center;
		height: 40px;
		color: #d7261c;
	}
</style>
